<template>
  <div class="table m7fixed footerfx">
    <pl-table
      :id="random"
      :data="data"
      stripe
      :use-virtual="true"
      :border="false"
      :max-height="maxHeight"
      size="mini"
      :row-height="40"
      :show-header="true"
      ref="table"
      >
      <template v-for="(item, index) in config">
        <pl-table-column
          v-if="item.show === true && item.name !== 'fromUrl' && item.name !== 'landingPageUrl' && (!isShowDetailExport || item.name !== 'platform') && item.name !== 'everyCustomStatusTime'"
          :prop="item.name"
          :key="(item.timeType || 'none')  + index"
          :label="item.displayname"
          sortable
          :sort-method="sortMethod(item.name)"
          ></pl-table-column>
        <pl-table-column
          v-else-if="item.name === 'fromUrl' && item.show === true"
          :prop="item.name"
          :label="item.displayname"
          sortable
          :sort-method="sortMethod(item.name)"
          :key="(item.timeType || 'none') + index"
          :show-overflow-tooltip = "bool"
          >
          <template scope="scope">
            <span v-html="scope.row.fromUrl"></span>
          </template>
        </pl-table-column>
        <pl-table-column
          v-else-if="item.name === 'landingPageUrl' && item.show === true"
          :prop="item.name"
          :label="item.displayname"
          sortable
          :sort-method="sortMethod(item.name)"
          :key="(item.timeType || 'none') + index"
          :show-overflow-tooltip = "bool"
          >
          <template scope="scope">
            <span v-html="scope.row.landingPageUrl"></span>
          </template>
        </pl-table-column>
        <pl-table-column
          v-else-if="item.name === 'platform' && item.show === true && isShowDetailExport"
          :prop="item.name"
          :label="item.displayname"
          sortable
          :sort-method="sortMethod(item.name)"
          :key="(item.timeType || 'none') + index"
          :show-overflow-tooltip = "bool"
          >
          <template scope="scope">
            <span class="drill" @click="chnnalType(scope.row._id, scope.row.platform)">{{scope.row.platform}}</span>
          </template>
        </pl-table-column>
      </template>
    </pl-table>
    <pl-table
      v-if="sum"
      size="mini"
      :id="random + '_sum'"
      :data="sum"
      style="display: none;width: 100%"
      :show-header="false"
      ref="tableSum"
      >
      <template v-for="(item, index) in config">
        <pl-table-column
          v-if="item.show === true && item.name !== 'everyCustomStatusTime'"
          :prop="item.name"
          :key ="(item.timeType || 'none') + index"
          :label="item.displayname"
          ></pl-table-column>
      </template>
    </pl-table>
  </div>
</template>
<script>
  import {cusSort} from '@/utils/reportUtils.js'
  export default {
    name: 'sum',
    data () {
      return {
        maxHeight: 500,
        bool: true, // 表格列超出显示点绑定值Bool
        random: Math.random(), // id值
        style: 'width: 100%;', // table绑定样式
        theight: 'fixed', // table绑定高度值
        isResizeOne: true // 窗口改变时，绑定变量值
      }
    },
    props: {
      isShowDetailExport: {
        type: Boolean,
        default: function () {
          return false
        }
      },
      data: {
        type: Array,
        default: function () {
          return []
        }
      },
      sum: {
        type: Array,
        default: function () {
          return []
        }
      },
      config: {
        type: Array,
        default: function () {
          return []
        }
      }, 
      fixedHeight: {type: Number, default: 166} // 虚拟滚动，高度计算要减去的部分，每个模块自己传值
    },
    methods: {
      chnnalType (id, name) {
        this.$emit('chnnalType', id, name)
      },
      tableStyle () {
        let parentDom = this.$el
        let headerDom = parentDom.querySelectorAll('.el-table .el-table__header-wrapper .el-table__header')[0]
        let headerHeight = headerDom ? headerDom.clientHeight : 0
        let headH = headerHeight
        this.maxHeight = document.body.clientHeight - headH - this.fixedHeight // 减掉父级传递下来的（减掉table上面的高度）
      },
      // 像table底部添加合计 避免合计也参加排序
      appendTfoot () {
        this.$nextTick(function () {
          if (this.data.length !== 0) {
            let target = document.getElementById(this.random)
            let heji = document.getElementById(this.random + '_sum')
            let tr = heji.getElementsByTagName('tr')
            if (tr[0]) {
              let tfoot = document.createElement('tfoot')
              tfoot.appendChild(tr[0])
              target.getElementsByTagName('table')[1].appendChild(tfoot)
            }
          }
        })
      },
      // 自定义的排序方法
      // 数字直接排序
      // String时分秒形式以：分隔转数字排序
      // String带 % s 转浮点数排序
      // 剩下中文用这个localeCompare排序
      sortMethod (name) {
        return cusSort(name)
      }
    },
    computed: {
      data1 () {
        return this.data
      }
    },
    watch: {
      // 监测数据变化处理表头自适应
      data1 (cur, pre) {
        let target = document.getElementById(this.random)
        if (!target) {
          return
        }
        let tfoot = target.getElementsByTagName('tfoot')[0]
        if (cur.length !== 0) {
          this.appendTfoot()
          if (tfoot) {
            tfoot.style.display = 'table-footer-group'
          }
        } else {
          if (tfoot) {
            tfoot.style.display = 'none'
          }
        }
        this.$nextTick(function () {
          if (this.$refs.table) {
            this.$refs.table.doLayout()
          }
          this.tableStyle()
          // setTimeout(function () { // 饿了么table第一次渲染是表头和body自适应之前高度是不准的，需要二次触发获取正确的高度
          //   window.onresize()
          // }, 500)
        })
      }
    },
    mounted () {
      let self = this
      window.addEventListener('resize', self.tableStyle)
    },
    activated () { // 在别的模块缩放了窗口回来的时候要触发一下重新计算
      let self = this
      if (!this.isResizeOne) {
        window.addEventListener('resize', self.tableStyle)
      }
      this.isResizeOne = true
      setTimeout(function () { // 可能table没加载完延迟执行一下
        self.tableStyle()
      }, 200)
    },
    deactivated () { // 离开后在别的模块缩放窗口不触发tableStyle()
      let self = this
      window.removeEventListener('resize', self.tableStyle)
      this.isResizeOne = false
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .table
    padding-bottom: 20px
  .drill
    color $c-main
    cursor pointer
</style>
